<template>
  <basic-dialog
    v-model:open="toggle"
    width="57.5rem"
    :show-close="false"
    @open="onOpen"
    @closed="onClosed"
  >
    <template #title>
      <div class="flex items-center gap-0.4rem text-1.5rem leading-1.75rem">
        <span>{{ props.record?.name }}</span>
        <span>-</span>
        <div>
          <span>$</span>
          <span>{{ props.record?.spin_amount }}</span>
        </div>
      </div>
    </template>

    <div class="flex items-center justify-center h-20rem" v-if="loading">
      <loading-comp class="!w-3rem" :track-width="6" />
    </div>
    <div v-else class="py-1.56rem">
      <box-product-list :product-list="productList" producet-with="52rem" />
    </div>
  </basic-dialog>
</template>

<script lang="tsx" setup>
import BasicDialog from "@/components/BasicDialog/basicDialog.vue";
import LoadingComp from "@/components/Loading/loading.vue";

import BoxProductList from "../../components/BoxProductList/boxProductList.vue";
import { useBoxDetail } from "../../hooks/useBoxDetail";
import { boxDetailModalEmits, boxDetailModalProps } from "./boxDetailModal";

const props = defineProps(boxDetailModalProps);
const emits = defineEmits(boxDetailModalEmits);

const { loading, boxInfo, getBoxInfo } = useBoxDetail();

const toggle = computed({
  get() {
    return props.open;
  },
  set(isOpen: boolean) {
    emits("update:open", isOpen);
  },
});

const productList = computed(() => {
  return boxInfo.value?.show_product_list || [];
});

async function onOpen() {
  if (props.record?.id) {
    await getBoxInfo({ id: props.record.id });
  }
}

function onClosed() {
  boxInfo.value = void 0;
  emits("clear");
}
</script>
